import { useEffect, useMemo, useState } from 'react'
import PageComponent from '@components/pageComponent'
import style from './index.module.less'
import logo from '@imgs/logo.png'
import { RightOutline } from 'antd-mobile-icons'
import classNames from 'classnames'
import { getListRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import { Skeleton, Toast } from 'antd-mobile'
// import { useAppSelector } from '@src/redux/hook'
import { useHistory, useParams } from 'react-router-dom'
import { useAppDispatch } from '@src/redux/hook'
import { setList } from '@src/redux/reducers/pages'
import uuid from 'uuid'
async function initData (setList, setLoading) {
  setLoading(true)
  const [e, d] = await awaitWrap(getListRequest())
  setLoading(false)
  if (e === null && d !== null) {
    setList(d)
  }
}

function Item ({ data, p }) {
  const dispatch = useAppDispatch()
  const h = useHistory()
  const [active, setActive] = useState(false)
  const [logoErr, setLogoErr] = useState(false)
  const logoUrl = useMemo(() => {
    if (data.logo) {
      return `/lftzhongcai${data.logo}`
    }
    return logo
  }, [data])
  // const u = useAppSelector(state => state.basic.userInfo)
  // const t= useAppSelector(state => state.basic.token)
  return (
    <div className={classNames(style.item, {[style.active]: active})} onClick={() => {
      setActive(true)
      setTimeout(() => {
        const url = typeof data.mparty_url === 'string' ? data.mparty_url : ''
        if (!url) {
          Toast.show({ content: '机构信息未配置' })
          setActive(false)
          return undefined
        }
        dispatch(setList([{ element: 'admin', title: '首页', id: uuid() }]))
        if (p === 'register') {
          dispatch(setList([{ element: 'admin', title: '首页', id: uuid() }, { element: 'addCaseProtocol', meta: { }, id: uuid() }]))
        }
        h.push(url)
        // location.href = url // `${url}/redirect?u=${encodeURIComponent(JSON.stringify(u))}&t=${t}&p=${p}&n=${data.name}`
        setActive(false)
      }, 150)
    }}>
      <div className={style.left}>
        {
          logoErr ? (
            <img className={style.logo} src={logo} />
          ) : (
            <img className={style.logo} src={logoUrl} onError={() => setLogoErr(true)} />
          )
        }
        <span className={style['item-label']}>{data.name}</span>
      </div>
      <RightOutline className={style.icon} />
    </div>
  )
}

function Main () {
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(false)
  const params = useParams()
  const h = useHistory()
  const p = useMemo(() => {
    return typeof params.p === 'string' && params.p.length > 0 ? params.p : ''
  }, [params])
  useEffect(() => {
    initData(setList, setLoading)
  }, [])
  return (
    <PageComponent title='选择仲裁委' onBack={() => {
      h.goBack()
    }}>
      <div className={style.container}>
        {
          loading && (
            <div className={style.loading}>
              <Skeleton.Paragraph animated />
            </div>
          )
        }
        {
          !loading && list.map((li, i) => <Item data={li} key={i} p={p} />)
        }
      </div>
    </PageComponent>
  )
}

export default Main
